<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>裹站-快递员下载页</title>
<link rel="stylesheet" href="css/style.css">
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="data/json.js"></script>
<!-- Stylesheet -->
</head>
<body style="background: #F7F4F8">
  <!--<div class="link-btn"></div>-->
  <div class="link-btn">
    <a class="link-item item_one" href="download-user.html"></a>
    <a class="link-item item_two" href="download-courier.html"></a>
    <a class="link-item item_mail" href="download-mail.html"></a>
    <a class="link-item item_help on" href="download-help.html"></a>
  </div>
  <div class="help-bg">
    <div class="item-wrap">
      <div style="margin-top: 200px;" class="form-input">
        <input class="input-inner" type="text" placeholder="请输入您要查找的内容">
        <div class="icon-search">
          <img src="images/ico-search.png" width="20" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="section item-wrap" id="container">
    <!--<div class="item-nav">
      <p>账号注册与登录</p>
      <p>账号注册与登录</p>
      <p>账号注册与登录</p>
    </div>
    <div class="item-container">
      <p>如何寄件？</p>
      <p>如何寄件？</p>
      <p>如何寄件？</p>
      <p>如何寄件？</p>
      <p>如何寄件？</p>
      <p>如何寄件？</p>
      <p>如何寄件？</p>
      <p>如何寄件？</p>
      <p>如何寄件？</p>
    </div>-->
  </div>
  <div class="item-wrap">
    <p style="text-align: center;margin-bottom: 50px">Copyright &nbsp; 2017 窝家 版权所有</p>
  </div>
<!-- JavaScript -->
<script>
  $(function(){
    getData()
  })
  function getData() {
    // url中参数处理
    if (getUrlParam("classifyNum")) {
      var classifyNum = parseInt(getUrlParam("classifyNum"))
    }
    if (getUrlParam("titleNum")) {
      var titleNum = parseInt(getUrlParam("titleNum"))
    }
    var hrefTmp = window.location.href
    // console.log('encodeURI', encodeURI(hrefTmp), hrefTmp)
    var paramsTitle = hrefTmp.split("?")[1].split("=")[3];//拆分url得到”=”後面的参数
    var paramsTmp = decodeURI(paramsTitle)
    // console.log('paramsTmp', paramsTitle, paramsTmp)
    var html = '';
    // navBar
    html += '<div class="item-nav">';
    for (var i = 0; i < json.length; i++) {
      if (i === classifyNum) {
        html += '<p class="selected" id="' + 'classify' + i + '">';
        html += '<a href="' + '/download-help-list.html?classifyNum=' + i + '">';
        html += json[i].classify;
        html += '</a>';
        html += '</p>';
      } else {
        html += '<p id="' + 'classify' + i + '">'
        html += '<a href="' + '/download-help-list.html?classifyNum=' + i + '">';
        html += json[i].classify;
        html += '</a>';
        html += '</p>';
      }
    }
    html += '</div>';
    // content
    html += '<div class="item-container" id="detail">';
    html += '<h3>';
    html += decodeURI(paramsTmp);
    html += '</h3>';
    if (json[classifyNum].list[titleNum].content) {
      html += '<p>' + json[classifyNum].list[titleNum].content + '</p>';
    }
    if (json[classifyNum].list[titleNum].img) {
      html += '<img src="' + json[classifyNum].list[titleNum].img + '">';
    }
    html += '</div>';
    $('#container').html(html);
    // 点击分类标题切换问题列表
    $('.item-nav p').click(function () {
      $(this).addClass('selected').siblings('p').removeClass('selected');
      var classifyNumTmp = parseInt($(this).attr('id').replace('classify', ''));
      // console.log('classifyNumTmp', classifyNumTmp)
      var list = '';
      for (var j = 0; j < json[classifyNumTmp].list.length; j++) {
        list += '<p>';
        list += '<a href="' + '/download-help-list.html?classifyNum=' + classifyNumTmp + '">';
        html += json[classifyNumTmp].list[j].title;
        html += '</a>'
        list += '</p>';
      }
      $('#list').html(list);
    })
  }
</script>
</body>
</html>